// @flow
import React, { Component, Fragment } from 'react';
import SocialLoginButton from 'components/Login/SocialLoginButton';
import { MdCheck as CheckIcon } from 'react-icons/md';
import Responsive from 'components/Base/Responsive';
import Spinner from 'components/Base/Spinner';
import cx from 'classnames';

import './LoginForm.scss';

type Props = {
  onChange(e: Event): void,
  onSendVerification(): Promise<*>,
  onEnterKeyPress(e: KeyboardEvent): void,
  onSocialLogin(provider: string): Promise<*>,
  email: string,
  sentEmail: boolean,
  sending: boolean,
  isUser: boolean,
};

const LoginForm = ({
  onChange,
  onSendVerification,
  onEnterKeyPress,
  email,
  sentEmail,
  sending,
  isUser,
  onSocialLogin,
}: Props) => {
  return (
    <div className="login-form">
      {sentEmail ? (
        <div className="sent-email">
          <CheckIcon />
          <div className="text">
            {isUser ? '登录' : '注册会员'} 的电邮链接已经发送出去.
            <br />
            请通过电邮链接来 {isUser ? '登录' : '注册会员'}.
          </div>
        </div>
      ) : (
        <div className={cx('input-with-button', { sending })}>
          <input
            type="text"
            placeholder="请输入电子邮箱地址"
            value={email}
            onChange={onChange}
            disabled={sending}
            onKeyPress={onEnterKeyPress}
          />
          <div className="button" onClick={onSendVerification}>
            {sending ? <Spinner size="3rem" /> : '现在开始'}
          </div>
        </div>
      )}
      <div className="separator">
        <div className="or">OR</div>
      </div>
      {/* <div className="social-buttons"> */}
      <SocialLoginButton provider="weibo" onSocialLogin={onSocialLogin} />
      <SocialLoginButton provider="github" onSocialLogin={onSocialLogin} />
      <SocialLoginButton provider="google" onSocialLogin={onSocialLogin} />
      {/* </div> */}
    </div>
  );
};

export default LoginForm;
